<template>
  <div class="contentList">
    <div class="bscroll" ref="bscroll">
      <div class="bscroll-container">
        <div class="main">
          <img src="../../static/img_02.jpg">
          <dl class="maintext">
            <dt>
              <h3>美肌改造|美肌一米七美女为了脱单，都干了些什么？</h3>
            </dt>
            <dd>有好男人介绍吗？</dd>
            <dd>
              <span>美肌改造</span>
            </dd>
          </dl>
        </div>
        <div class="main">
          <img src="../../static/img_02.jpg">
          <dl class="maintext">
            <dt>
              <h3>美肌改造|美肌一米七美女为了脱单，都干了些什么？</h3>
            </dt>
            <dd>有好男人介绍吗？</dd>
            <dd>
              <span>美肌改造</span>
            </dd>
          </dl>
        </div>
         <div class="main">
          <img src="../../static/img_02.jpg">
          <dl class="maintext">
            <dt>
              <h3>美肌改造|美肌一米七美女为了脱单，都干了些什么？</h3>
            </dt>
            <dd>有好男人介绍吗？</dd>
            <dd>
              <span>美肌改造</span>
            </dd>
          </dl>
        </div>
         <div class="main">
          <img src="../../static/img_02.jpg">
          <dl class="maintext">
            <dt>
              <h3>美肌改造|美肌一米七美女为了脱单，都干了些什么？</h3>
            </dt>
            <dd>有好男人介绍吗？</dd>
            <dd>
              <span>美肌改造</span>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入插件
import BScroll from "better-scroll";
export default {
  data() {
    return {
      dropDown: false,
      back: false
    };
  },
  mounted() {
    this.scrollFn();
  },
  methods: {
    //返回顶部
    backTop() {
      //  console.log( this.scroll)
      this.scroll.scrollTo(0, 0, 1000);
    },
    //上拉加载，下拉刷新
    scrollFn() {
        var oScroll = new BScroll(this.$refs.bscroll, {
        probeType: 2,
        //下拉刷新：可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
        //这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载
        pullUpLoad: {
            threshold: 10
        },
        mouseWheel: {    // pc端同样能滑动
            speed: 20,
            invert: false
        },
        useTransition:false  // 防止iphone微信滑动卡顿
    });
    oScroll.on("pullingUp",function(){
        //alert('已到最底部');
        console.log('加载ajax数据');
        oScroll.finishPullUp();//可以多次执行上拉刷新
    });
    oScroll.refresh();

    }
  }
};
</script>

<style lang="less" scoped>
.contentList {
  height: 100%;
}
.bscroll{
    width: 100%;
    height:100%;
    overflow: hidden;
}
.bscroll-container{
}
.drop-down{
    position: absolute;
    top:0px;
    lefT:0px;
    width: 100%;
    height: 50px;
    line-height:50px;
    text-align: center;
    font-size:0.8rem;
    color:#CCC;
}
.main {
  background: #fff;
  img {
    width: 100%;
  }
  .maintext {
    width: 9.65rem;
    margin-left: 0.38rem;
    margin-bottom: 0.4rem;
    dt {
      font-size: 0.44rem;
      letter-spacing: 0.1rem;
      margin-top: 0.45rem;
    }
    dd {
      margin-top: 0.45rem;
      color: #bebebe;
      span {
        color: #474747;
        display: inline-block;
        padding: 0.15rem;
        border-radius: 0.06rem;
        background: #949dbc;
        margin-bottom: 0.24rem;
      }
    }
  }
}
.backtop{
  position: fixed;
  top: 80%;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  text-align: center;
  right: 0.32rem;
  background: #ffffff;
  color: #dfdfdf;
  padding-top: .38rem;
  box-sizing: border-box;
}
</style>